<template>
  <div class="nav">
    <div class="nav_con">
      <div class="left">
        <i class="back iconfont icon-sousuo"
           v-if="search"
           @click="searchAction"></i>
        <slot name="left"
              v-if="back"></slot>
      </div>
      <div class="center"
           @click="jumpAction">
        <slot name="title">{{title}}</slot>
      </div>
      <div class="right">
        <span v-if="login"
              @click="lrAction"><i class="iconfont icon-biaoqiankuozhan_wode-310"></i></span>
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navigation",
  data: function () {
    return {
      // toux: localStorage.getItem('code')
    }
  },
  computed: {
    search: function () {
      return this.$store.state.nav.search;
    },
    title: function () {
      return this.$store.state.nav.title;
    },
    login: function () {
      return this.$store.state.nav.login;
    },
    back: function () {
      return this.$store.state.nav.back;
    },
    jump: function () {
      return this.$store.state.nav.jump;
    }
  },

  methods: {
    lrAction () {
      this.$router.push({ name: 'Login' });
    },
    searchAction () {
      this.$router.push({ name: 'Search' });
    },
    jumpAction () {
      if (this.jump == true) {
        this.$router.push({ name: 'City' });
      }
    }
  },
}
</script>

<style lang="less">
.nav {
  height: 45px;

  .nav_con {
    height: 45px;
    background-color: #3190e8;
    color: white;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 20px;
  }

  .left {
    i {
      font-size: 25px;
      color: white;
    }
  }

  .right {
    span i {
      font-size: 20px;
    }
  }
}
</style>